<template>
	<div style="background:#10275F;">
		
		<!-- <div style="background: #11214B;padding: 20px 0;margin-top: 20px;">
			
			<div class="flex flex-col-center" >
				<div  style="color: #fff;margin-right: 10px;">
					工单日期
				</div>
				<div :span="6">
					<el-date-picker
					     v-model="date"
					     type="daterange"
					     range-separator="至"
					     start-placeholder="开始日期"
					     end-placeholder="结束日期">
					   </el-date-picker>
				</div>
			</div>
			 
		</div> -->
		
		
		<div class="flex flex-row-between " style="padding: 20px 0;">
			<div style="background: #11214B;padding: 20px;width: 400px;">
				<div id="chart_1"></div>
			</div>


			<div style="background: #11214B;padding: 20px;width:400px;">
				<div id="chart_2"></div>
				
			</div>


			<div style="background: #11214B;padding: 20px;width: 300px;">
				<div id="chart_3"></div>
				<div style="color: #fff;position: relative;bottom: 65px;left: 120px;">完成率{{rate}}</div>
			</div>


			<div style="background: #11214B;padding: 20px;width: 600px;">
				<div id="chart_4"></div>
			</div>
		</div>


		<div style="background: #11214B;padding: 20px 0;">
			<el-table :data="list.list" style="width: 100%"  v-loading="loading">
				<el-table-column label="历时" width="180">
					<template slot-scope="scope">
						<div class="flex flex-col-center">
							<img v-if="scope.row.status=='0'" src="@/assets/status_2.png"
								style="width: 30px;height: 30px;" />
							<img v-if="scope.row.status=='1'" src="@/assets/status_1.png"
								style="width: 30px;height: 30px;" />
							<img v-if="scope.row.status=='2'" src="@/assets/status_3.png"
								style="width: 30px;height: 30px;" />
							<span style="margin-left: 10px;">{{scope.row.recCreateTime?scope.row.recCreateTime.slice(0,11):''}}</span>

						</div>
					</template>
				</el-table-column>
				<el-table-column prop="time" label="日期" width="180">
				</el-table-column>
				<el-table-column prop="custId" label="客户">
				</el-table-column>
				<el-table-column prop="productName" label="产品名称">
				</el-table-column>
				<el-table-column prop="eventName" label="工单事件">
				</el-table-column>
				<el-table-column label="币种）" >
					<template slot-scope="scope">
						<div style="color: #F3FF00;">{{scope.row.currencyName}}</div>
					</template>
				</el-table-column>
				<el-table-column label="金额（元）" >
					<template slot-scope="scope">
						<div style="color: #F3FF00;">{{scope.row.amount}}</div>
					</template>
				</el-table-column>
				<el-table-column label="发起时间" width="100">
					<template slot-scope="scope">
						<div >{{scope.row.recCreateTime?scope.row.recCreateTime.slice(11,16):''}}</div>
					</template>
				</el-table-column>
				<el-table-column  label="完成时间" width="100" >
					<template slot-scope="scope">
						<div >{{scope.row.end_time?scope.row.end_time.slice(11,16):''}}</div>
					</template>
				</el-table-column>
				<el-table-column label="详情" width="100">
					<template slot-scope="scope">
						<div class="flex flex-col-center">
							<!-- <div class="flex">
								<span>客户专员处理</span>
								<span style="margin: 0 10px;">
									<img src="@/assets/right_circle.png" style="width: 24px;height: 24px;" />
								</span>
								<span>风控专员处理</span>
							</div> -->
							<div v-if="scope.row.wor" >
								<el-button style="background: linear-gradient(180deg, #0169FF 0%, #14B7FF 100%);"
									@click="edit(scope.row)" size="small" type="primary">
									详情
								</el-button>
							</div>

						</div>

					</template>
				</el-table-column>
			</el-table>
			
			<div style="display:flex;justify-content: flex-end;margin: 20px;">
				<basePagination :size="list.size" :page="list.current" :total="list.total" @SizeChange='SizeChange'
					@CurrentChange='CurrentChange' />
			</div>
			
			
			<el-dialog
			  
			  :visible.sync="dialogVisible"
			  width="40%"
			  
			  >
			  <div style="color: #fff;text-align: center;font-size: 30px;margin: 20px 0 40px 0;">处理提示</div>
			  <div v-for="(item,index) in detail" :key="index"
			  	style="width:50%;display: flex;justify-content: space-around;margin: auto;color: #fff;">
			  	<div style="width:100px;text-align: center;">
			  		<div style=" color: #fff;font-size: 12px;font-weight: bold;">{{item.taskName}}</div>
			  
			  		<div class="" style="margin: 15px 0;" v-if="index<detail.length-1">
			  			<img src="@/assets/arrow_bottom.png" style="width: 36px;height: 36px;"></image>
			  		</div>
			  	</div>
			  	<div>{{item.endTime}}</div>
			  </div>
			</el-dialog>

		</div>
	</div>
</template>

<script>
	import loader from '@/components/base/basePagination/controls.js';
	import * as echarts from 'echarts';
	import charts_1 from './charts_1.js';
	import charts_2 from './charts_2.js';
	import charts_3 from './charts_3.js';
	import charts_4 from './charts_4.js';
	export default {
	mixins: [loader],
	
		data() {
			return {
				custId:'',
				date:'',
				limit:10,
				page:1,
				list:{

				},
				loading:true,
				detail: [],
				dialogVisible:false,
				rate:''
			}
		},
		created() {
			
		    this.jiazai()
		
		},
		
		mounted() {
			this.getCharts_1();
			this.getCharts_2()


	        this.getCharts_3()

this.getCharts_4()
	


			//建议加上以下这一行代码，不加的效果图如下（当浏览器窗口缩小的时候）。超过了div的界限（红色边框）
			window.addEventListener('resize', function() {
				myChart.resize()
			});
		},
		methods: {
			getCharts_1(){
				this.axios.get("/report/business/getBusinessEventTypeNum", {
				}).then(res => {
					let productName=res.data.productName.splice(0,10)
					let businessNum=res.data.businessNum.splice(0,10)
					let myChart_1 = echarts.init(document.getElementById('chart_1'));
					charts_1.yAxis.data=productName;
					charts_1.series[0].data=businessNum;
					myChart_1.setOption(charts_1);
				}).catch(error => {
				})
			},
			
			
			getCharts_2(){
				this.axios.get("/report/business/getWorkTimeNum", {
				}).then(res => {
					let taskName=res.data.taskName.splice(0,10)
					let timeNum=res.data.timeNum.splice(0,10)
					let myChart_2 = echarts.init(document.getElementById('chart_2'));
					charts_2.xAxis.data=taskName;
					charts_2.series[0].data=timeNum;
					myChart_2.setOption(charts_2);
				}).catch(error => {
				})
			},
			
	
			getCharts_3(){
				this.axios.get("/report/business/getBusinessMonthNum", {
				}).then(res => {
				   let taskName=res.data.endNum;
				   let timeNum=res.data.notNum;
				   let myChart_3 = echarts.init(document.getElementById('chart_3'));
				   charts_3.series[0].data[0].name=taskName,
				   charts_3.series[0].data[0].value=taskName,
				   charts_3.series[0].data[1].name=timeNum;
				   charts_3.series[0].data[1].value=timeNum;
				   this.rate=res.data.endRate
				   myChart_3.setOption(charts_3);
				}).catch(error => {
				})
			
			},
			getCharts_4(){
				this.axios.get("/report/business/getYearBussinessNum", {
				}).then(res => {
				   let monthList=res.data.monthList;
				   let timeNum=res.data.notNum;
				   let thisNum=res.data.thisNum;
				   let lastNum=res.data.lastNum;
				   let myChart_4 = echarts.init(document.getElementById('chart_4'));
				  charts_4.xAxis.data=monthList;
					
					charts_4.series[0].data=thisNum;
					charts_4.series[1].data=lastNum;
			
				   myChart_4.setOption(charts_4);
				}).catch(error => {
				})
			
			},
			
			edit(item){
				if(!item.workList.length)return
				this.detail=item.workList;
				this.dialogVisible=true
			},
			SizeChange(e){
				this.loading=true;
				this.limit=e.size;
				this.jiazai();
			},
			CurrentChange(e){
				this.loading=true;
				this.page=e.page;
				this.jiazai();
			},
			jiazai(){
				this.axios.get("/report/business/getBusinessList", {
					params:{
						custId:'',
						limit:this.limit,
						page:this.page
					}
				}).then(res => {
					console.log(res.data,77)
					this.list=res.data;
					this.loading=false;
				}).catch(error => {
				})
			}
		},
		
	}
</script>
<style style="scss" >
	#chart_1 {
		width: 400px;
		height: 300px;
		margin: 0 auto;
	}

	#chart_2 {
		width: 400px;
		height: 300px;
		margin: 0 auto;
	}

	#chart_3 {
		width: 300px;
		height: 400px;
		margin: 0 auto;
	}

	#chart_4 {
		width: 600px;
		height: 400px;
		margin: 0 auto;
	}

	.el-table tr {
		background: #121F44 !important;
		color: #fff;
	}

	.el-table th {
		background: #162C5B !important;
	}

	.el-table td.el-table__cell,
	.el-table th.el-table__cell.is-leaf {
		border-bottom: 1px solid rgba(108, 157, 255, 0.39);
	}


	.el-table--enable-row-hover .el-table__body tr:hover>td {
		background-color: rgba(108, 157, 255, 0.39) !important;
	}
	
	 .el-dialog, .el-pager li{
		background: #0E214F !important;
		
	}
	.el-range-separator,.el-date-editor ,.el-range-input{
		color: #fff!important;
	}
	.el-input__inner,.el-range-input{
		background:transparent
	}
	
	.el-pagination__total,.el-pager li ,.el-pagination__sizes ,.el-input ,.el-input__inner ,.el-pagination__jump{
		color: #fff;
	}
</style>
